<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html id="housewifes">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="robots" content="noodp,noydir">
    <meta name="description" content=" Housewifes - сервис для домохозяек.">
    <link rel="alternate" media="handheld" href="/">

    <link type="text/css" rel="stylesheet" href="css/main_hw.css">
    <link type="text/css" rel="stylesheet" href="css/header_hw.css">
    <link type="text/css" rel="stylesheet" href="css/menu_hw.css">
    <link type="text/css" rel="stylesheet" href="css/footer_hw.css">
    <link type="text/css" rel="stylesheet" href="../main/webapp/css/jcrousel/style.css">
    <link rel="stylesheet" type="text/css" href="../main/webapp/css/jcrousel/skins/tango/skin_ut_breaf.css"/>
    <link rel="stylesheet" type="text/css" href="../main/webapp/css/jquery.treeview.css"/>

    <script type="text/javascript" src="../main/webapp/script/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../main/webapp/script/jquery.jcarousel.js"></script>

</head>

<body>
<div id="globalContainer">
    <table border="0" width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td class="main_header_container gradientV2">
                <table class="main_header_table" align="center" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td class="header_left gradientV2">
                            <span class="header_logo_span">DомохоzЯйки</span>
                        </td>
                        <td class="header_center gradientV2">
                            <table border="0" cellpadding="0" cellspacing="0" style="height:16px">
                                <tr >
                                    <td>
                                        <input placeholder="Поиск" class="header_search_input">
                                    </td>
                                    <td>
                                         <span title="Поиск" class="header_search_spanbtn"></span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="header_right gradientV2">
                            <span class="header_span"><a href="http://test.server.ru" class="header_link">помощь</a></span>
                            <span class="header_span"><a href="http://test.server.ru" class="header_link">выйти</a></span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td height="600">
                <table class="main_container_table" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td rowspan="2" class="main_menu_cell">
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <a href="http://test.server.ru" class="menu_link">
                                            <div class="menu_item selected_menu_item">
                                                <span class="menu_icon_countainer">
                                                    <!--<i class="sp_9rf1fr sx_001"></i>-->
                                                    <i class="menu_icon_img_0"></i>
                                                </span>
                                                <span class="menu_title_conteiner">Главная</span>
                                            </div>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://test.server.ru" class="menu_link">
                                            <div class="menu_item">
                                                <span class="menu_icon_countainer">
                                                    <i class="menu_icon_img_1"></i>
                                                </span>
                                                <span class="menu_title_conteiner">Мои таблицы</span>
                                            </div>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://test.server.ru" class="menu_link">
                                            <div class="menu_item">
                                                <span class="menu_icon_countainer">
                                                    <i class="menu_icon_img_2"></i>
                                                </span>
                                                <span class="menu_title_conteiner">Мои рецепты</span>
                                            </div>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://test.server.ru" class="menu_link">
                                            <div class="menu_item">
                                                <span class="menu_icon_countainer">
                                                    <i class="menu_icon_img_3"></i>
                                                </span>
                                                <span class="menu_title_conteiner">Избранные рецепты</span>
                                            </div>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://test.server.ru" class="menu_link">
                                            <div class="menu_item">
                                                <span class="menu_icon_countainer">
                                                    <i class="menu_icon_img_4"></i>
                                                </span>
                                                <span class="menu_title_conteiner">Мои цены</span>
                                            </div>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                            <br/>
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <a href="http://test.server.ru" class="menu_link">
                                            <div class="menu_item">
                                                <span class="menu_icon_countainer">
                                                    <i class="menu_icon_img_5"></i>
                                                </span>
                                                <span class="menu_title_conteiner">Поиск таблиц</span>
                                            </div>
                                        </a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://test.server.ru" class="menu_link">
                                            <div class="menu_item">
                                                <span class="menu_icon_countainer">
                                                    <i class="menu_icon_img_6"></i>
                                                </span>
                                                <span class="menu_title_conteiner">Поиск рецептов</span>
                                            </div>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://test.server.ru" class="menu_link">
                                            <div class="menu_item">
                                                <span class="menu_icon_countainer">
                                                    <i class="menu_icon_img_7"></i>
                                                </span>
                                                <span class="menu_title_conteiner">Пойти в магазин</span>
                                            </div>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <td class="main_content_cell">

                            <!-- MAIN CONTENT AREA START-->
                            <table width="100%"  border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="200" valign="top">
                                        <table width="100%" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td height="35" class="gradientV2">
                                                    <div class="block_header_title">
                                                        Добавление рецепта в 13-ый день таблицы "My first menu(60 дней)"
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>

                                        <table cellpadding="0" cellspacing="0" border="0" width="400" class="recipe_select_block">
                                            <tr>
                                                <td>
                                                    <div class="block_header_title">
                                                    Выберите рецепты
                                                    </div>
                                                </td>
                                                <td style="text-align: right" height="25px" >
                                                    <div class="block_header_editbtn_container">
                                                        <span id="addRecipeBtn0" class="uiButton">
                                                            <span class="uiButtonText">Добавить на</span>
                                                        </span>
                                                        <select name="eatingType" style="height: 23px">
                                                            <option value="BREAKFAST">Завтрак</option>
                                                            <option value="DINNER">Обед</option>
                                                            <option value="LUNCH">Полдник</option>
                                                            <option value="SUPPER">Ужин</option>
                                                            <option value="OTHER">Другое</option>
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td  class="recipe_groups_block" colspan="2">
                                                    <div style="width: 400px; height: 510px; border: #000000 solid 0px; overflow: auto">
                                                        <div id="TEST_TREE_CONTAINER" class="filetree treeview treeview-hw"></div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>



                                    </td>
                                </tr>
                            </table>
                            <!-- MAIN CONTENT AREA END-->

                        </td>
                    </tr>
                    <tr>
                        <td class="main_footer_cell">
                            <span class="footer_text_block">DомохоzЯйки © 2011-2012</span>
                            <span class="footer_text_block">&nbsp;&nbsp;&nbsp;</span>
                            <a href="http://test.server.ru" class="footer_link">о сайте</a>
                            <a href="http://test.server.ru" class="footer_link">помощь</a>
                            <a href="http://test.server.ru" class="footer_link">правила</a>
                            <a href="http://test.server.ru" class="footer_link">реклама</a>
                            <a href="http://test.server.ru" class="footer_link">реклама</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>
</div>

</body>

<script type="text/javascript">

    var treeData = [
        {
            id: '1', title: '001', folder: true, closed: true,
            children: [
                {
                    id: '1-1', title: '001-1', folder: true, closed: true,
                    children: [
                        {id: '1-1-1', title: '001-1-1', folder: false},
                        {id: '1-1-2', title: '001-1-2', folder: false},
                        {id: '1-1-3', title: '001-1-3', folder: false}
                    ]
                },
                {
                    id: '1-2', title: '001-2', folder: true, closed: true,
                    children: [
                        {id: '1-2-1', title: '001-2-1', folder: false},
                        {id: '1-2-2', title: '001-2-2', folder: false},
                        {id: '1-2-3', title: '001-2-3', folder: false}
                    ]
                },
                {
                    id: '1-3', title: '001-3', folder: true,
                    children: [
                        {id: '1-3-1', title: '001-3-1(Proxy)', folder: true, needLoad: true},
                        {id: '1-3-2', title: '001-3-2', folder: false},
                        {id: '1-3-3', title: '001-3-3', folder: false}
                    ]
                }
            ]
        },
        {
            id: '2', title: '002', folder: true,
            children: [
                {
                    id: '2-1', title: '002-1', folder: true,
                    children: [
                        {id: '2-1-1', title: '002-1-1', folder: false},
                        {id: '2-1-2', title: '002-1-2', folder: false},
                        {id: '2-1-3', title: '002-1-3', folder: false}
                    ]
                },
                {
                    id: '2-2', title: '002-2', folder: true,
                    children: [
                        {id: '2-2-1', title: '002-2-1', folder: false},
                        {id: '2-2-2', title: '002-2-2', folder: false},
                        {id: '2-2-3', title: '002-2-3', folder: false}
                    ]
                },
                {
                    id: '2-3', title: '002-3', folder: true,
                    children: [
                        {id: '2-3-1', title: '002-3-1', folder: false},
                        {id: '2-3-2', title: '002-3-2', folder: false},
                        {id: '2-3-3', title: '002-3-3', folder: false}
                    ]
                }
            ]
        },
        {
            id: '3', title: '003', folder: true, closed: true,
            children: [
                {
                    id: '3-1', title: '003-1', folder: true,
                    children: [
                        {id: '3-1-1', title: '003-1-1', folder: false},
                        {id: '3-1-2', title: '003-1-2', folder: false},
                        {id: '3-1-3', title: '003-1-3', folder: false}
                    ]
                },
                {
                    id: '3-2', title: '003-2', folder: true,
                    children: [
                        {id: '3-2-1', title: '003-2-1', folder: false},
                        {id: '3-2-2', title: '003-2-2', folder: false},
                        {id: '3-2-3', title: '003-2-3', folder: false}
                    ]
                },
                {
                    id: '3-3', title: '003-3', folder: true,
                    children: [
                        {id: '3-3-1', title: '003-3-1', folder: false},
                        {id: '3-3-2', title: '003-3-2', folder: false},
                        {id: '3-3-3', title: '003-3-3', folder: false}
                    ]
                }
            ]
        }
    ];

    function addLevel(container, data) {

        var showChildrenUl = function(li, hitarea, ul) {
            hitarea.addClass('collapsable-hitarea');
            hitarea.removeClass('expandable-hitarea');
            li.removeClass('expandable');
            ul.show();
        };

        var hideChildrenUl = function(li, hitarea, ul) {
            hitarea.removeClass('collapsable-hitarea');
            hitarea.addClass('expandable-hitarea');
            li.addClass('expandable');
            ul.hide();
        };

        var loadChildren = function(parentId) {
            var testChildren = [
                {id: 'chld-1-for-' + parentId, title: 'chld-1-for-' + parentId, folder: false},
                {id: 'chld-2-for-' + parentId, title: 'chld-2-for-' + parentId, folder: false},
                {id: 'chld-3-for-' + parentId, title: 'chld-3-for-' + parentId, folder: true, closed: true,
                    children: [
                        {id: 'chld-3-1-for-' + parentId, title: 'chld-3-1-for-' + parentId, folder: false},
                        {id: 'chld-3-2-for-' + parentId, title: 'chld-3-2-for-' + parentId, folder: false},
                        {id: 'chld-3-3-for-' + parentId, title: 'chld-3-3-for-' + parentId, folder: false}
                    ]
                }
            ];
//            alert('going to load children');
//            alert('children loaded');
            return testChildren;
        };

        $.each(data, function(index, value) {
            //alert('2');
            var nodeId = value.id;
            var nodeTitle = value.title;
            var nodeIsFolder = value.folder;
            var folderClosed = value.closed;
            var nodeNeedLoadChildren = value.needLoad;

            var li = $('<li/>');
            container.append(li);

            var spans = $('<span style="cursor: pointer; border: red solid 0px; display: inline"><span class="hidden_id">' + nodeId + '</span>' + nodeTitle +'</span>');
            spans.addClass(nodeIsFolder ? "folder" : "file");

            var ul = $('<ul/>');

            var toggleItem = function() {
                if (nodeNeedLoadChildren) {
                    li.append('<span class="placeholder"/>');
//                    alert('111');
                    value['children'] = loadChildren(nodeId);
                    $(".placeholder").remove();
                    addLevel(ul, value['children']);
                    nodeNeedLoadChildren = false;
//                        alert('111');
                }
                if (ul.is(":visible")) {
                    hideChildrenUl(li, hitarea, ul);
                } else {
                    showChildrenUl(li, hitarea, ul);
                }
            };
            if (nodeIsFolder) {
                var hitarea = $('<div class="hitarea collapsable-hitarea"></div>');
                hitarea.click(function() {
                    toggleItem();
                });
                li.append(hitarea);
                if (folderClosed || nodeNeedLoadChildren) {
                    hideChildrenUl(li, hitarea, ul);
                }
            }
            spans.click(function() {
                var idOfNode = $(this).children(".hidden_id").text();
                if (value.folder) {
                    //alert('id folder: ' + idOfNode);
                    toggleItem();
                } else {
                    // alert('id file: ' + idOfNode);
                    if (li.hasClass("selected")) {
                        li.removeClass("selected");
                    } else {
                        li.addClass("selected");
                    }
                }
            });


            li.append(spans);
            if (nodeIsFolder) {
                li.append(ul);
                if (!nodeNeedLoadChildren) {
                    addLevel(ul, value['children']);
                }
            }

        });
    }

    $(document).ready(function() {
        //alert('1');
        // TEST CREATING HTML TREE
        var container = $("#TEST_TREE_CONTAINER");
        var ul = $('<ul/>');
        container.append(ul);
        addLevel(ul, treeData);
    });


    $(document).ready(function(){

        $(".menu_item").each(function() {
            $(this).hover(
                    function() {
                        if (!$(this).hasClass("selected_menu_item")) {
                            $(this).addClass("menu_item_hover");
                        }
                    },
                    function(){
                        $(this).removeClass("menu_item_hover");
                    }
            );
        });
        $(".save_receipes_count_btn").each(function() {
            $(this).hover(
                    function() {
                        $(this).addClass("menu_item_hover");
                    },
                    function(){
                        $(this).removeClass("menu_item_hover");
                    }
            );
        });
        $(".active_daymenu").each(function() {
            $(this).hover(
                    function() {
                        $(this).addClass("active_daymenu_hover");
                    },
                    function(){
                        $(this).removeClass("active_daymenu_hover");
                    }
            );
        });
        $(".cur_active_daymenu").each(function() {
            $(this).hover(
                    function() {
                        $(this).addClass("active_daymenu_hover");
                    },
                    function(){
                        $(this).removeClass("active_daymenu_hover");
                    }
            );
        });

        jQuery('.usertable_breaf').show();

/*
        jQuery('.usertable_breaf').jcarousel({
            scroll: 1,
            start: 2
        });
*/

        jQuery('#mycarousel').jcarousel({
            scroll: 1,
            start: 2
        });
        jQuery('#mycarouse2').jcarousel({
            scroll: 1,
            start: 1
        });

/*
        setTimeout(function() {
            $("#globalContainer").show();
        }, 100);
*/

        $("input.onlyNumbers").keydown(function(event) {
            // Allow: backspace, delete, tab, escape, and enter
            if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                // Allow: Ctrl+A
                    (event.keyCode == 65 && event.ctrlKey === true) ||
                // Allow: home, end, left, right
                    (event.keyCode >= 35 && event.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else {
                // Ensure that it is a number and stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                    event.preventDefault();
                }
            }
        });

    });

    function isNumberKey(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
            // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) ||
            // Allow: home, end, left, right
                (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault();
            }
        }
    }

    function onNumberInputKeyUp(receipeId, event) {
        var origValue = $("#orig_value_holder_" + receipeId).text();
        if ($(event.currentTarget).val() != origValue) {
            $("#save_btn_" + receipeId).show();
        } else {
            $("#save_btn_" + receipeId).hide();
        }
    }

</script>

</html>